import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import viteCompression from "vite-plugin-compression";

// element plus 自动按需导入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

console.log("vite 打包中");

export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    viteCompression({
      algorithm: "gzip", // 压缩算法，可选[‘gzip’，‘brotliCompress’，‘deflate’，‘deflateRaw’]
      threshold: 10240, // 如果体积大于阈值，则进行压缩，单位为b
      deleteOriginFile: false, // 压缩后是否删除源文件 如果设置为true 可能会导致运行不了
      // 某些服务器环境下可能无法正确处理压缩文件，需要使用原始文件进行备份
      // 如果设置为true 则 原始文件被删除 就没有备份文件来启动项目了
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    // 设置别名，方便在代码中引用模块
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  build: {
    outDir: "dist",
    // 生产环境下的优化设置
    minify: "terser",
    terserOptions: {
      // terser压缩选项，可根据需求调整
      compress: {
        drop_console: true, // 去除控制台输出
        drop_debugger: true, // 去除debugger语句
      },
    },
    rollupOptions: {
      output: {
        /** S-静态文件按类型分包 */
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]",
        /** E-静态文件按类型分包 */
        manualChunks(id) {
          // 超大静态资源拆分
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  },
  server: {
    port: 8080, // 设置开发服务器监听端口
    host: "0.0.0.0", // 可通过任何IP访问开发服务器
    strictPort: false, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    open: true, // 启动服务器时自动打开浏览器
    hmr: true, // 热更新
    proxy: {
      "/api": {
        target: "http://xxx.xxx.xxx", // 后端服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  css: {
    // CSS相关优化设置
    postcss: {
      // 配置PostCSS，例如添加autoprefixer等插件
      plugins: [
        // 示例：添加autoprefixer自动添加浏览器前缀
        require("autoprefixer")({
          overrideList: ["last 10 versions", "> 1%", "ie 6-9"],
        }),
      ],
    },
    preprocessorOptions: {
      // 对预处理器（如Sass、Less等）的设置
      less: {
        // 导入全局变量文件
        additionalData: `@import "${path.resolve(
          __dirname,
          "src/less/variables.less"
        )}";`,
        // 修改Less的数学计算精度（可选）
        math: "always",
        // 严格模式（可选），对语法等要求更严格
        strictMath: true,
        // 全局Less函数（可选），可以在这里定义一些全局函数供Less文件使用
        globalVars: {
          mainColor: "blue",
        },
      },
    },
  },
  optimizeDeps: {
    // 优化依赖预构建，可指定需要预构建的模块或排除某些模块
    include: ["vue", "axios"], // 示例：预构建vue和axios模块
    exclude: ["node_modules"], // 示例：排除某个不需要预构建的模块
  },
});
